<template>
  <div>
      <van-field label="标题" v-model="from.title"  />
        <van-dropdown-menu >
        <van-dropdown-item v-model="from.status" :options="option1" title="消息类型" />
        </van-dropdown-menu>
        <div class="block">
            <span class="demonstration">选择时间</span>
            <el-date-picker
            v-model="from.time"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
            </el-date-picker>
        </div>

        <van-dropdown-menu>
        <van-dropdown-item v-model="from.proiority" :options="option2" title="优先级" />
        </van-dropdown-menu>

        <van-dropdown-menu>
        <van-dropdown-item v-model="from.category" :options="option3" title="通知类型" />
        </van-dropdown-menu>

        <div v-if="from.category == 1">
              <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @select="aa"
            >
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
            <el-table-column
            prop="id"
            label="序号"
            width="120">
            </el-table-column>
            <el-table-column
            prop="name"
            label="姓名"
            width="120">
            </el-table-column>
            <el-table-column
            prop="gender"
            label="性别"
            show-overflow-tooltip>
            </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
            <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
            <el-button @click="toggleSelection()">取消选择</el-button>
        </div>
        </div>
        <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="from.content">
        </el-input>
        <van-button @click="addmes">提交</van-button>
  </div>
</template>

<script>
import myaxios from '../components/http/axios'
export default {
      setup() {

    const option1 = [
      { text: '通知公告', value: 0 },
      { text: '系统消息', value: 1 },
    ];
    const option2 = [
      { text: '高', value: 0 },
      { text: '中', value: 1 },
      { text: '低', value: 2 },
    ];
    const option3 = [
      { text: '全体员工', value: 0 },
      { text: '指定用户', value: 1 },
    ];
    return {
      option2,
      option1,
      option3,

    
    };
  },

  data(){
      return{
        from:{content:'',title:'',time:'',status:'',proiority:'',category:'',notice:[]},
        tableData:[],
        userlist: [],
      }
  },
  methods:{
      aa(v){
        console.log(v);
        this.from.notice = v
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },

      getuser(){
            myaxios('getmesuser','get').then(res=>{
                this.tableData = res.list            })
      },
      addmes(){
          myaxios('addmessage','post',this.from).then(res=>{
              console.log(res);
          })
      }
  },
  mounted(){
      this.getuser()
      
  }

}
</script>

<style>

</style>